checkbox 设置滑动复选框 —

checkbox 设置滑动复选框

时间：2020-12-03 | 分类：编程笔记>HTML

点击按钮测试一下吧

使用 appearance: none; 去掉复选框的默认外观，便于设计新样式。

使用after伪类元素在复选框中添加滑动按钮。

使用linear-gradient()设置按钮背景颜色线性渐变，使得按钮更真实。

box-shadow: 0px 2px 2px 0px #eee inset,2px 1px 2px 0px #333; 设置阴影效果，看起来更美观。

input[type='checkbox']:checked设置复选框被选中后的变化。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8"/>
       <title></title>
   </head>
   <style type="text/css">
       *{padding: 0;margin: 0;}
       input[type='checkbox']{
           margin: 100px;
           appearance: none;/* 去掉复选框默认样式 */
           border: 15px solid lightgray;/* 设置边框 */
           border-radius: 50px;/* 设置圆角 */
           width: 300px; height: 100px;/* 设置宽高 */
           background: darkgray;/* 设置背景颜色 */
           position: relative;
           box-shadow: 0 0 10px 1px #3f3f3f inset;/* 设置复选框内阴影效果 */
           transition: 0.6s;/* 设置过渡动画时间 */
       }
       /* 使用after伪类元素添加滑动按钮 */
       input[type='checkbox']::after{
           content: "";
           display: block;
           width: 100px; height: 100px;
           position: absolute;
           left: -5px; top: -15px;
           border-radius: 50px;
           /* 使用线性渐变设置按钮背景颜色 */
           background: linear-gradient(to bottom,#bcbcbc,#6f6f6f);
           /* 设置按钮内外阴影效果 */
           box-shadow: 0px 2px 2px 0px #eee inset,2px 1px 2px 0px #333;
           transition: 0.6s;
       }
       /* 使用checked来设置复选框被选中后的改变 */
       input[type='checkbox']:checked{
           background: greenyellow;
       }
       /* 设置按钮被选中后的改变 */
       input[type='checkbox']:checked::after{
           left: 175px;
       }
   </style>
   <body>
       <input type="checkbox"> 
   </body>
</html>